<template>
  <el-avatar v-if="disabled" v-bind="$attrs"
             :src="imageCache[src]"
             :key="src"
             :style="{ fontSize: fontSize, background: background }"
             :class="{ 'cursor-pointer': !disabled }"
             :size="size"
             fit="fill">{{ showName }}
  </el-avatar>

  <el-popover v-else v-model:visible="popoverShow"
              :trigger="trigger"
              :disabled="popoverDisabled"
              placement="bottom"
              width="250"
              popper-class="no-padding-popover">
    <!--默认插槽-->
    <template>
      <XrUserView :data="userData" :src="imageCache[src]"/>
    </template>
    <!--reference插槽-->
    <template v-slot:reference>
      <el-avatar v-bind="$attrs" :src="imageCache[src]"
                 :key="src"
                 :style="{ fontSize: fontSize, background: background }"
                 :class="{ 'cursor-pointer': !disabled }"
                 :size="size"
                 :alt="showName"
                 fit="fill">
        {{ showName }}
      </el-avatar>
    </template>
  </el-popover>
</template>

<script setup>
import XrUserView from 'components/XrUserView/index.vue'
import {useAppStore} from "@/store/modules/app.js";
import {ref, watch, onMounted, computed} from "vue"
import {getImageData} from "utils";
import {systemUserInfoAPI} from "@/api/common.js";

defineOptions({
  // Avatar 头像
  name: 'XrAvatar',
  inheritAttrs: false,
})

const properties = defineProps({
  name: String,
  id: [Number, String],
  size: {
    type: [Number],
    default: 384
  },
  src: String,
  disabled: {
    type: Boolean,
    default: true
  },
  trigger: {
    type: String,
    default: 'click'
  },
  background: {
    type: String,
    default: '#2362FB'
  }
})


const popoverShow = ref(false)
const userData = ref(null)


const imageCache = computed(() => {
  const appStore = useAppStore()
  console.log("appStore.imageCache",appStore.imageCache)
  return appStore.imageCache
})
const fontSize = computed(() => {
  if (properties.size <= 30) {
    return '12px'
  }
  return '14px'
})

const showName = computed(() => {
  return properties.name && properties.name.length > 2 ? properties.name.slice(-2) : properties.name
})

const popoverDisabled = computed(() => {
  if (properties.disabled) {
    return true
  }

  return !properties.id
})

onMounted(() => {
  getUserData();
})
watch(popoverShow, (val) => {
  if (!userData.value) {
    getUserData()
  }
})
watch(() => properties.src, () => {
  handleImage()
}, {
  immediate: true
})

function handleImage() {
  if (properties.src) {
    if (!imageCache.value.hasOwnProperty(properties.src)) {
      // .$set(this.imageCache, this.src, '')
      imageCache.value[properties.src] = ''
      const appStore = useAppStore()
      // this.$store.commit('SET_IMAGECACHE', this.imageCache)
      appStore.SET_IMAGECACHE(imageCache.value)
      getImageData(properties.src).then(data => {
        // .$set(this.imageCache, this.src, data.src)
        imageCache.value[properties.src] = data.src
        // this.$store.commit('SET_IMAGECACHE', this.imageCache)
        appStore.SET_IMAGECACHE(imageCache.value)
      }).catch(() => {
        delete imageCache.value[properties.src]
        // this.$store.commit('SET_IMAGECACHE', this.imageCache)
        appStore.SET_IMAGECACHE(imageCache.value)
      })
    }
  }
}

function getUserData() {
  console.log("getUserData2", getUserData)
  systemUserInfoAPI({
    userId: properties.id
  }).then(res => {
    userData.value = res.data.data
  }).catch(() => {
  })
}
</script>

<style lang="scss" scoped>
.cursor-pointer {
  cursor: pointer;
}

.el-avatar {
  :deep(img) {
    width: 100%;
    background: white !important;
  }
}
</style>
